<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attractions</title>
    <link rel="stylesheet" href="nav_style.css">
    <style>
        h2{
            top:160px;
            font-size: 30px;
            font-family:Verdana, Geneva, Tahoma, sans-serif;
            line-height: 45px;
            margin-left: 50px;
            position: absolute;
        }

        .outer-box {  
            margin-left: 680px; 
            margin-top: 110px;
            display: flex; /* 使用Flex布局 */  
            flex-wrap: wrap; /* 允许换行，虽然在这个例子中不需要 */  
        }  
        .blue1{
            color: #4590e7;
        }
 
        /* 上面的单独框的样式 */  
        .top-box {  
            width: 100%; /* 宽度为外部大框的宽度 */  
            height: 120px;
            padding: 10px; /* 内边距 */  
            font-size: 20px;
            color: #6b6363;
        }  
        .p1{
            font-size: 40px;
            color: #999;
        }
        
        /* 两个并排小框的样式 */  
        .inner-box {  
            flex: 1; /* 使用Flex的弹性属性，确保两个小框平分宽度 */  
            padding: 10px; /* 内边距 */  
            height: 160px;
            color: #6b6363;
        }  
  
      
       #imageroll{
        display:inline-block;
        left:50px;
        top:235px;
        height:320px;
        margin:0 11px 0 0;
        overflow: hidden;
        position: absolute;
        width: 550px; 
       }
       #imageroll img{
        width: 550px;;
        height: 320px;
        position: absolute;
        left:0;
        top:0;
       }
       #imageroll div{
        bottom: 0;
        overflow: hidden;
        position: absolute;
        float: left;
       }
       #imageroll div a{
        background-color:#999;
        color: #fff;
        display: block;
        float: left;
        height: 32px;
        margin-right: 1px;
        padding: 5px 15px;
        text-align: center;
        width: 79px;
       }
       #imageroll div a p{
        cursor:pointer;
        height: 12px;
        text-align: center;
        width:79px;
        margin-top: 4px;
       }
       .c1{
        font-size: 30px;
        margin-left: 45px;
       }
       .c2{
        font-size: 16px;
        text-indent: 2em;
        line-height: 28px;
       }
    </style>
</head>
<body>
    <script src="nav.js"></script>
<h2>八大关   Eight Great Sites</h2>
   <div id="imageroll">
        <a id="imgwrap">
            <img src="1.png">
            <img src="2.png">
            <img src="3.png">
            <img src="4.png">
            <img src="5.png">
        </a>
        <div>
            <a><p> one</p></a>
            <a><p> two</p></a>
            <a><p> three</p></a>
            <a><p> four</p></a>
            <a><p> five</p></a>
        </div>
   </div>
   <div class="outer-box">  
    <!-- 上面的单独框 -->  
    <div class="top-box">  
        <p>青岛景点排名第 <span class="blue1">3</span></p>  
        <p>建议游览时间: <span class="blue1">3</span>  小时</p>  
        <p>评分:<br>
        <span class="blue1">4.5</span>
        /5分 
        </p>
    </div>  
    <!-- 两个并排的小框 -->  
    <div class="inner-box">  
        <p class="p1">77%</p>
        <p class="p2">去过
        <span class="blue1">青岛</span>  的朋友
            <br>
             来过这里
        </p> 
    </div>  
    <div class="inner-box">  
        <p class="p1">87%</p>
        <p class="p2">
            <span class="blue1">旅游攻略</span>  中
                <br>
                 提到了这里
            </p> 
    </div>  
</div>  
<div class="c1">
    概述
    <div class="c2">
        八大关(Badaguan Scenic Area)，位于山东省青岛市市南区汇泉东部，太平山南麓，始建于20世纪30年代，是中国著名的风景疗养区，面积70余公顷。
        八大关是最能体现青岛“红瓦<br>绿树、碧海蓝天”特点的风景区，位于山东省青岛市汇泉角景区北部。八个关隘，八个地标；八种容颜，八种风情；八处
        景色，八处意境，一头通向遥远的边塞雄关，一边连着咫尺的海天<br>蜃景。所谓"八大关"，是因为这里有八条马路（现已增到十条），是以中国古代长
        城著名关隘命名的。此处是著名的别墅区，人称“万国建筑博物馆”。</div>
        <div class="c2">
        八大关的建筑造型独特，汇聚了众多的各国建筑风格，故有“万国建筑博览会”之称。
        这里集中了俄、英、法、德、美、丹麦、希腊、西班牙、瑞士、日本等20多个国家的各式建筑风<br>格。西部是线条明快的美国式建筑“东海饭店”；靠近
        第二海水浴场，是解放后新建的汇泉小礼堂，采用青岛特产的花岗岩建造，色彩雅致，造型庄重美观；再加上一幢幢别具匠心的小别<br>墅，使八大关有
        了“万国建筑博览会”的美誉 。风格多样的建筑使这里成为电影外景的最佳选择，如《家务清官》、《苗苗》、《13号魔窟》等40多部电影和20多部电视
        剧都在此拍摄，<br>很多歌星的MTV外景也选在这里，比如叶倩文、林子祥的《选择》、《重逢》就是在八大关拍的外景。面积：70余公顷。八大关是以
        8条关隘命名的路而得来的，即韶关路、嘉峪关路、函<br>谷关路、正阳关路、临淮关路、宁武关路、紫荆关路、居庸关路（现已增为十条路，另两条为
        武胜关路、山海关路）。各条马路纵横交错，形成一个方圆数里的风景区。 
    </div>
</div>
   <script src="jquery-1.8.3.js"></script>
   <script>
    $(document).ready(function(){
        var index=0;
        $('#imageroll div a').mouseover(function(){
            index=$('#imageroll div a').index(this);
            showImg(index);
        }).eq(0).mouseover();
        function showImg(index){
            var $rollobj=$('#imageroll');
            var $rolllist=$rollobj.find('div a');
            var newhref=$rolllist.eq(index).attr('href');
            $('#imgwrap').attr('href',newhref).find('img').eq(index).stop(true,true).fadeIn().siblings().fadeOut();
        }
    })
   </script>
</body>
</html>